<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			body,
			html,
			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				margin: 0;
				font-family: "微软雅黑";
			}
		</style>
		
		<title>设置驾车路线途经点</title>
	</head>

	<body>
		<div id="allmap"></div>
	</body>

</html>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
		</script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9">
		</script>
<script type="text/javascript">
	document.addEventListener('UniAppJSBridgeReady', function() {
		var mood = plus.storage.getItem('line');
		mood = JSON.parse(mood)
		
		var cont = []
		
		// 百度地图API功能
		var map = new BMap.Map("allmap");
		map.centerAndZoom(new BMap.Point(106.61044945794814, 29.55090312415411), 8);
		map.enableScrollWheelZoom(true);

		function showPoly(pointList) {
			//循环显示点对象
			for (c = 0; c < pointList.length; c++) {
				var marker = new BMap.Marker(pointList[c]);
				map.addOverlay(marker);
				//将途经点按顺序添加到地图上
				let number = c
				var label
				if (number == 0) {
					label = new BMap.Label('发货地:' + cont[c].addressName, {
						offset: new BMap.Size(20, -10)
					});
				} else {
					label = new BMap.Label('目的地' + number + ':' + cont[c].addressName, {
						offset: new BMap.Size(20, -10)
					});
				}
				marker.setLabel(label);
			}

			var group = Math.floor(pointList.length / 11);
			var mode = pointList.length % 11;

			var driving = new BMap.DrivingRoute(map, {
				onSearchComplete: function(results) {
					if (driving.getStatus() == BMAP_STATUS_SUCCESS) {
						var plan = driving.getResults().getPlan(0);
						var num = plan.getNumRoutes();
						for (var j = 0; j < num; j++) {
							var pts = plan.getRoute(j).getPath(); //通过驾车实例，获得一系列点的数组
							var polyline = new BMap.Polyline(pts);
							map.addOverlay(polyline);
						}
					}
				}
			});
			for (var i = 0; i < group; i++) {
				var waypoints = pointList.slice(i * 11 + 1, (i + 1) * 11);
				//注意这里的终点如果是11的倍数的时候，数组可是取不到最后一位的，所以要注意终点-1喔。感谢song141的提醒，怪我太粗心大意了~
				driving.search(pointList[i * 11], pointList[(i + 1) * 11 - 1], {
					waypoints: waypoints
				}); //waypoints表示途经点
			}
			if (mode != 0) {
				var waypoints = pointList.slice(group * 11, pointList.length - 1); //多出的一段单独进行search
				driving.search(pointList[group * 11], pointList[pointList.length - 1], {
					waypoints: waypoints
				});
			}
		}

		function ToManualRoamFunc() {
			cont = mood
			map.centerAndZoom(new BMap.Point(cont[0].lng, cont[0].lat), 12);
			var arrayList = [];
			cont.forEach(item => {
				arrayList.push(new BMap.Point(item.lng, item.lat))
			})
			showPoly(arrayList);
		}

		function cacel(st, ed) {
			var map = new BMap.Map("container");
			var pointA = new BMap.Point(st.lng, st.lat); // 创建点坐标A
			var pointB = new BMap.Point(ed.lng, ed.lat); // 创建点坐标B
			var range = map.getDistance(pointA, pointB).toFixed(2); //获取两点距离,保留小数点后两位
			range = (range / 1000).toFixed(2)
			return range * 1
		}

		function sortBy(attr, rev) {
			if (rev == undefined) {
				rev = 1
			} else {
				(rev) ? 1: -1;
			}
			return function(a, b) {
				a = a[attr];
				b = b[attr];
				if (a < b) {
					return rev * -1
				}
				if (a > b) {
					return rev * 1
				}
				return 0;
			}
		}
		
		ToManualRoamFunc()
	})



	//显示轨迹
</script>